<template>
  <div class="page-bg">
    <listTable ref="tableRef" v-model="tableData" @getList="getList">
      <template #search></template>
      <template #action>
        <div class="flex action">
          <div class="left">
            <el-button
              type="primary"
              @click="router.push('/goods/edit')"
              v-if="power.addData"
              >新增产品</el-button
            >
            <el-popconfirm
              title="确定删除？"
              @confirm="delFn()"
              v-if="power.delData"
            >
              <template #reference>
                <el-button>批量删除</el-button>
              </template>
            </el-popconfirm>
          </div>
          <div class="right">
            <el-button @click="exportFn">导出execl表格</el-button>
          </div>
        </div>
      </template>
      <el-table-column label="封面图片" width="100">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :preview-src-list="[scope.row.productImage]"
            :src="scope.row.productImage"
            fit="contain"
            preview-teleported
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="标题" min-width="200">
        <template #default="scope">
          <div class="line-2">{{ scope.row.productName }}</div>
        </template>
      </el-table-column>
      <typeColumn :typeList="tableData.types" width="180" label="分类" />
      <el-table-column
        prop="productPrice"
        sortable="custom"
        label="价格"
        width="100"
      >
      </el-table-column>
      <el-table-column
        align="center"
        width="100"
        label="状态"
        :filters="[
          { text: '显示', value: '1' },
          { text: '隐藏', value: '0' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.a_show == '1'" type="success">显示</el-tag>
          <el-tag v-else type="info">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="up_time" width="180" />
      <el-table-column label="添加时间" prop="create_time" width="180" />
      <el-table-column fixed="right" label="操作栏" width="150" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="router.push('/goods/edit?id=' + scope.row.id)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除？"
            @confirm="delFn(scope.row)"
            v-if="power.delData"
          >
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </listTable>
  </div>
</template>

<script lang="ts" setup>
import { listTable, typeColumn } from "@/components/listPage";
import { ElMessage } from "element-plus";
import { tableDataType, tableDataQuery, typeItem } from "@/common/interface";
import { post } from "@/common/http";
import config from "@/common/config";
import dayjs from "dayjs";
import table2excel from "js-table2excel";
import { usePowerHooks } from "@/composition/usePowerApi";
const { power } = usePowerHooks(["goods:delData", "goods:addData"]);

const tableRef = ref();

const router = useRouter();

interface listItem {
  id: number;
  productImage: string;
  productName: string;
  productPrice: number;
  a_show: string;
  type_id: number;
  up_time: number;
  create_time: number;
  typeName: string;
}

//表格组件数据
const tableData = reactive<tableDataType<listItem>>(new tableDataType());

//获取列表
function getList(data: tableDataQuery): void {
  post("api/goods/get_list_data_a", {
    page: data.page,
    limit: data.limit,
    type_id: data.type_id ?? 0,
    keyWord: data.searchVal,
    sortField: data.sortField, //需要排序的字段
    sort: data.sort, //desc asc
  }).then((res) => {
    tableData.lists = res.data.list.map((v: listItem) => {
      let typeName = "";
      res.data.type.forEach((type: typeItem) => {
        if (v.type_id === type.id) typeName = type.name;
      });
      return {
        ...v,
        typeName,
        productImage: config.serverImg + v.productImage,
        up_time: dayjs(v.up_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
        create_time: dayjs(v.create_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
      };
    });
    tableData.types = res.data.type;
    tableData.total = res.total ?? 0;
    tableData.loading = false;
  });
}

//删除 / 批量删除
function delFn(item?: listItem) {
  let ids: number[] = [];
  if (item) {
    ids = [item.id];
  } else {
    if (tableData.checkItem.length) {
      ids = tableData.checkItem.map((v) => v.id);
    } else {
      return ElMessage.warning("请勾选需要操作的数据");
    }
  }
  post("api/goods/del_data_a", { ids }).then(() => tableRef.value.reload());
}

//筛选当前页数据的 状态
const filterTag = (value: string, row: listItem) => {
  return row.a_show === value;
};

//导出数据
function exportFn() {
  const column = [
    {
      title: "产品图片",
      key: "productImage",
      type: "image",
      width: 80,
      height: 80,
    },
    {
      title: "产品名称",
      key: "productName",
      type: "text",
    },
    {
      title: "价格",
      key: "productPrice",
      type: "text",
    },
    {
      title: "类型",
      key: "typeName",
      type: "text",
    },
    {
      title: "修改时间",
      key: "up_time",
      type: "text",
    },
    {
      title: "添加时间",
      key: "create_time",
      type: "text",
    },
  ];
  table2excel(column, tableData.lists, "产品" + new Date().getTime());
}
</script>

<style lang="scss" scoped>
.action {
  justify-content: space-between;
}
</style>
